<!-- FormSection.vue -->
<template>
  <div>
    <el-form :model="localForm" label-width="80px">
      <el-form-item label="店长姓名">
        <el-input
          v-model="localForm.branchManagerName"
          style="width: 48%"
          readonly
          placeholder=""
        />
        <!-- <el-select
          v-model="localForm.employeeId"
          style="width: 48%"
          placeholder="请选择店长"
          @change="handleStoreManagerChange"
          filterable
          clearable
        >
          <el-option
            v-for="item in storeManagerList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select> -->
      </el-form-item>

      <el-form-item label="金额">
        <el-input
          v-model="localForm.storeAmount"
          style="width: 48%"
          readonly
          placeholder=""
        >
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="公司">
        <el-input
          v-model="localForm.companyAmount"
          style="width: 48%"
          readonly
          placeholder=""
        >
          <template #append>元</template>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="tips">
      <div>金额 = 买方交易费代收 + 卖方交易费代收</div>
      <div>公司 = 买方交易费 + 卖方交易费</div>
    </div>
    <div class="actions" style="text-align: right">
      <el-button :loading="subLoad" type="primary" @click="submit"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { editTcForm, listStoreManager } from "@/api/business/tcForm";
const { proxy } = getCurrentInstance();
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  fData: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(["update:data"]);

// 本地副本，避免直接修改 props
const localForm = ref({ ...props.data });
const initData = reactive({ ...props.fData });
localForm.value.storeAmount =
    initData.transactionFeeProxySellerAr + initData.transactionFeeProxyBuyerAr;
localForm.value.companyAmount =
    initData.transactionFeeSellerAr + initData.transactionFeeBuyerAr;
// 修改同步回父组件
watch(
  localForm,
  (newVal) => {
    emit("update:data", newVal);
  },
  { deep: true }
);
const subLoad = ref(false);
const submit = () => {
  const payload = {
    id: initData.id,
    sysHzTransactionServiceFeeDistribution: localForm.value,
  };

  subLoad.value = true;
  // TODO: 调用接口提交
  editTcForm(payload)
    .then((res) => {
      subLoad.value = false;
      proxy.$modal.msgSuccess("修改成功");
    })
    .catch((err) => {
      subLoad.value = false;
    });
};

const storeManagerList = ref([]);
function getStoreManagerList() {
  listStoreManager().then((res) => {
    storeManagerList.value = res.data;
  });
}
getStoreManagerList();

function handleStoreManagerChange(value) {
  localForm.value.branchManagerName = storeManagerList.value.find(
    (v) => v.id === value
  )?.name;
}
</script>

<style scoped lang="scss">
.add-btn {
  margin-top: 10px;
  text-align: left;
}
.tips {
  font-size: 12px;
  color: #999;
  div {
    margin-top: 4px;
  }
}
</style>
